<template>
  <div id="wrapper">
    <div id="title">
      <ul id="title-ul">
        <li>购物车</li>
        <li v-show="isShow">编辑</li>
      </ul>
    </div>
    <div id="topImg">
      <img src="../../assets/shopCar/topImg.png" alt="">
      <img src="../../assets/shopCar/goshareBig.png" alt="">
    </div>
    <ul class="goods">
      <li>
          <div class="goods-title">
            <input type="checkbox" class="Ipt" @click="checkAll()">
            <img src="../../assets/shopCar/plane.png" alt="" class="plane">
            <span>日本直邮</span>
          </div>
      </li>
      <li v-for="obj in productArr" class="goods-list">
        <input type="checkbox" class="goods-list-Ipt" :checked="isCheck">
        <img :src="obj.img" alt="">
        <div class="goods-list-detail">
          <p>{{obj.name}}</p>
          <p>规格: {{obj.guiGe}}</p>
          <p>¥ {{obj.price}}</p>
        </div>
        <div class="add">
          <span @click="decrease(obj)"> - </span>
          <span>{{obj.amount}}</span>
          <span @click="add(obj)"> + </span>
        </div>
      </li>
    </ul>
    <ul class="goodsPrice">
      <li>
        <span>商品金额</span>
        <span>¥ {{priceTotal}}</span>
      </li>
      <li>
        <span>综合税总额</span>
        <span>¥ {{fees}}</span>
      </li>
      <li>
        <span>应付总金额</span>
        <span>¥ {{shouldPrice}}</span>
      </li>
      <li>

        <span class="settlement">结算 ( {{goodsNum}} )</span>
      </li>
    </ul>
    <MyFooter></MyFooter>
  </div>

</template>
<script>
  import MyFooter from '../home/MyFooter/MyFooter.vue'
  import Vue from 'vue'
//  import {mapGetters, mapActions} from 'vuex'
  export default {
    data() {
      return {
        productArr: [],
        isPush: false,
        isCheck: false,
        isShow: true,
        priceTotal: 0,
        fees: 0,
        shouldPrice: 0,
        goodsNum: 0,
        goods:[{
          img: require('../../assets/shopCar/mifen.png'),
          name: '会呼吸丝滑蜜粉',
          guiGe: '90g',
          price: 166,
          num: 1,
          address: '日本直邮'
        },{
          img: require('../../assets/shopCar/mifen.png'),
          name: '会呼吸丝滑蜜粉',
          guiGe: '90g',
          price: 166,
          num: 1,
          address: '日本直邮'
        }]
      }
    },
    components: {
      MyFooter,
    },
    created() {
      //给 goods添加商品信息
    },
    activated(){
      let iNum = 0;
      // 打开开关
      this.isPush = this.getIsPush
      if(this.isPush) {
        this.goods.push(this.getProduct);
        console.log(this.getProduct);

        //
        for(let i = iNum; i < this.goods.length; i++){
          this.priceTotal += this.goods[i].price;
          this.goodsNum += this.goods[i].num;
        };
        iNum = this.goodsNum;
        console.log(this.goodsNum);
        console.log("2222",this.goods);
        // 计算税费
        this.fees = (this.priceTotal * 0.01);
        //计算应付总金额
        console.log(this.priceTotal);
        this.shouldPrice = (this.priceTotal + this.fees);
//      this.fees = (this.priceTotal * 0.01).toFixed(2);
        //计算 价格总金额
//      this.priceTotal = this.priceTotal.toFixed(2);
      }
      //

    },
    computed: {
//      getProduct (){
//        return JSON.parse(this.$route.params.product);
//      },
//      getIsPush (){
//        return this.$route.params.isPush;
//      },
      //      接收ID

    },
    methods: {
      checkAll() {
        this.isCheck = !this.isCheck
      },
      add(obj) {
        obj.num++
      },
      decrease(obj) {
        if(obj.num < 2) {
          obj.num = 2;
        }
        obj.num--
      }
    },
//    {ID:{type:Number},img:{type:String},name:{type:String},price:{type:Number},standard:{type:String},address:{type:String},surplus:{type:Number},brand:{type:String},addressImg:{type:String}}
//    ID: 103,
//    img: 'http://10.90.86.246:8012/jiaochuankouhong.png',
//    name: '娇吻玉口红',
//    price: 88,
//    standard: '60g',
//    address: 'http://10.90.86.246:8012/faguo.png',
//    surplus: 201,
//    brand: '欧莱雅',


//    //          获取表三的所有锁具
//    Vue.axios.get('/goods/whole').then((whole) => {
//    this.productArr = whole.data;
//  })
    mounted() {
//         获取表三的所有锁具
        Vue.axios.get('/goods/whole').then((whole) => {
          this.productArr = whole.data;
        })
    }
  }
</script>
<style scoped>
  @import "../../style/checkBox.css";
  #wrapper{
    padding-bottom: 6rem;
  }
  #title{
    width: 100%;
    height: 4.8rem;
    background-color: #e53e42;
    color: white;
    position: relative;
  }
  #title-ul li{
    display: inline-block;
    font-size: 1.8rem;
  }
  #title-ul {
    width:calc(100% - 2rem);
    height: 2rem;
    position: absolute;
    top:1.5rem;
    left: 1rem;
    right: 1rem;
  }
  #title-ul li:nth-child(1){
    width: 100%;
    text-align: center;
  }
  #title-ul li:nth-child(2){
    font-size: 1.5rem;
    position: absolute;
    top:0.3rem;
    right:0;
  }
  #topImg{
    position: relative;
  }
  #topImg img:nth-child(1){
    width: 100%;
  }
  #topImg img:nth-child(2){
    width: 11rem;
    position: absolute;
    top:3.5rem;
    right: 2rem;
  }
  .goods{
    width: 100%;
  }
  .plane{
    width: 1.7rem;
  }
  .goods li{
    border-bottom: 1px solid #cccccc;
  }
  .goods-title{
    width: calc(100% - 2rem);
    height: 4rem;
    margin: 0 auto;
    font-size: 1.4rem;
    color: #4d4d4d;
    position: relative;

  }
  .Ipt{
    position: absolute;
    top:1rem;
    left: 0;
  }
  .goods-title img{
    position: absolute;
    top:1rem;
    left: 2rem;
  }
  .goods-title span{
    position: absolute;
    top:1rem;
    left: 4.5rem;
  }
  /*商品列表*/
  .goods-list{
    width: 100%;
    height: 10rem;
    position: relative;
  }
  .goods-list-Ipt{
    position: absolute;
    top:4.2rem;
    left: 1rem;
  }
  .goods-list img{
    height: 5rem;
    position: absolute;
    top:2.5rem;
    left: 5rem;
  }
  .goods-list div{
    position: absolute;
  }
  .goods-list-detail{
    top:1.5rem;
    left:12rem;
  }
  .goods-list-detail p:nth-child(1) {
    font-size: 1.5rem;
    color: #4d4d4d;
  }
  .goods-list-detail p:nth-child(2) {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #666666;
  }
  .goods-list-detail p:nth-child(3) {
    margin-top: 1rem;
    font-size: 1.5rem;
    color: #e53e42;
  }
  /*增加按钮*/
  .add{
    width: 8rem;
    height: 2.5rem;
    border: 1px solid #cccccc;
    border-radius: 2.5rem;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
  }
  .add span{
    display: inline-block;
    position: absolute;
  }
  .add span:nth-child(1),
  .add span:nth-child(3){
    width:2rem;
    height: 2rem;
    top:0.2rem;
    border: 1px solid #cccccc;
    border-radius: 50%;
    text-align: center;
    font-size: 1.8rem;
    line-height: 2rem;
  }
  .add span:nth-child(1){
    left: 0.2rem;
  }
  .add span:nth-child(3){
    right: 0.2rem;
  }
  .add span:nth-child(2){
    width: 1rem;
    height: 2.5rem;
    text-align: center;
    font-size: 1.2rem;
    line-height: 2.5rem;
    top:0;
    left: 3.5rem;
  }
  /*商品金额*/
  .goodsPrice li{
    width:100%;
    height: 5rem;
    color: #4d4d4d;
    font-size: 1.4rem;
    line-height:5rem;
    border-bottom: 1px solid #cccccc;
    position: relative;
  }
  .goodsPrice li>span:nth-child(1){
    margin-left: 2rem;
  }
  .goodsPrice li>span:nth-child(2){
    position: absolute;
    /*margin-left: 10rem;*/
    color: #e53e42;
    top:0;
    right: 1rem;
  }
  .settlement{
    width: 8rem;
    height: 2.5rem;
    border: 1px solid #cccccc;
    border-radius: 2.5rem;
    font-size: 1.2rem;
    line-height: 2.5rem;
    text-align: center;
    background-color: #e53e42;
    position: absolute;
    right: 1rem;
    top:1.2rem;
    color: white;
  }
</style>
